<template>
  <div>
    <!-- 年度开工率 -->
    <Echart :options="options"
            id="bottomLeftChart"
            ref="bottomLeftChart"
            height="170px"
            width="100%"></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {}
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = {
          xAxis: {
            type: 'category',
            data: ['书记岗', '两委岗', '其他正职岗', '副职岗', '社工岗', '网格员'],
            axisLabel: {
              interval: 0
            }
          },
          yAxis: {
            type: 'value',
            name: '（人）'
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC"
              }
            }
          },
          grid: {
            x: "10%",
            y: "25%",
            x2: "5%",
            y2: '15%'
          },
          series: [
            {
              name: '人数',
              type: 'bar',
              barWidth: 20,//柱图宽度
              data: [
                {
                  value: newData.shuji,
                  itemStyle: {
                    color: '#F40002',
                  }
                }, {
                  value: newData.liangwei,
                  itemStyle: {
                    color: '#32c5e9',
                  }
                }, {
                  value: newData.qitazhengzhi,
                  itemStyle: {
                    color: '#9fe6b8',
                  }
                },
                {
                  value: newData.fuzhi,
                  itemStyle: {
                    color: '#ffdb5c',
                  }
                }, {
                  value: newData.shegong,
                  itemStyle: {
                    color: '#e7bcf3',
                  }
                }, {
                  value: newData.wangge,
                  itemStyle: {
                    color: '#8378ea',
                  }
                }
              ],
              itemStyle: {
                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                normal: {
                  //柱形图圆角，初始化效果
                  barBorderRadius: [5, 5, 0, 0]
                }
              },
              label: {
                show: true,
                formatter: '{c}人',
                fontSize: 16,
                position: 'top'
              },
              barGap: '0%'
            }
          ]
        }
      },
      immediate: true,
      deep: true
    },
  }
}
</script>